<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 雷达图 - 两个图形示例</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js"></script>
</head>
<body>
<div id="radarChart" style="width: 600px; height: 600px;"></div>
<script>
var chart = echarts.init(document.getElementById('radarChart'));

// 数据
var radarIndicators = ['指标A', '指标B', '指标C', '指标D', '指标E', 'x 指标'];
var radarData = [
    { name: '系列1', value: [60, 70, 80, 90, 75, 90] },
    { name: '系列2', value: [40, 60, 70, 80, 65, 70] }
];

// 配置项
var option = {
    tooltip: {
        trigger: 'item', // 触发类型为数据项触发
        backgroundColor: 'rgba(0, 0, 0, 0.7)', // 背景颜色
        borderColor: '#fff', // 边框颜色
        borderWidth: 1, // 边框宽度
        textStyle: {
            color: '#fff', // 文本颜色
            fontSize: 14 // 字体大小
        }
    },
    lengend: {
        show: true,
    },
    radar: {
        indicator: radarIndicators.map((name, i) => ({ name: name, max: 100, axisLabel:{show: (i == 0) ? true : false} })), // 定义雷达图的维度和最大值
        center: ['50%', '50%'], // 雷达图中心位置
        radius: '80%',
        axisLabel: {
            show: true,
            color: 'white',
        },
    },
    series: [
        {
            type: 'radar',
            data: radarData.map(series => ({
                name: series.name,
                value: series.value
            }))
        }
    ]
};

// 初始化图表
chart.setOption(option);
const radarChart = document.querySelector('#radarChart');
// 监听鼠标移动事件
chart.on('mousemove', function (params) {
    if (params.componentSubType === 'radar') { // 确保事件来自雷达图
        // 获取雷达图的中心点
        var width = chart.getWidth();
        var height = chart.getHeight();
        var centerX = width / 2;
        var centerY = height / 2;

        // 获取鼠标位置
        var mouseX = params.event.offsetX;
        var mouseY = params.event.offsetY;
         // 每个维度的角度范围
         var totalDimensions = radarIndicators.length;
        var anglePerDimension = (2 * Math.PI) / totalDimensions;

        // 计算鼠标与雷达图中心的角度（弧度）
        var angleRad = Math.atan2(mouseY - centerY, mouseX - centerX);
        if (angleRad < 0) {
            angleRad += 2 * Math.PI; // 将角度转换为正值
        }
       
        const singeBlock = 360/totalDimensions;
        // 计算鼠标所在的维度索引 --- 计算错误
         var angleArr = radarIndicators.map((v, i) => {
            if (i === 0) return 270*Math.PI/180;
            let a = 270 - i*singeBlock;
            if (a <= 0) {
              a = a + 360;
            }
            return a*Math.PI/180;
         })
         
         // 发现距离最新的值，对应的下标就是dimensionIndex 
         var results = angleArr.map( v => Math.abs(v - angleRad));
         var min = Math.min(...results);
        var  dimensionIndex =  results.findIndex( v => v == min);


        // 拼接提示框内容
        var tooltipContent = `<strong>${radarIndicators[dimensionIndex]}</strong><br/>`; // 标题为当前维度名称
        radarData.forEach(function (series, i) {
            tooltipContent += `<span style="background:red; height: 8px;width: 8px;border-radius: 8px; display: inline-block;"></span>${series.name}: ${series.value[dimensionIndex]}<br/>`;
        });

        // 更新提示框内容
        chart.setOption({
            tooltip: {
                show: true,
                formatter: tooltipContent
            }
        });
    }
});
</script>
</body>
</html>
